<template>
	<view class="mine">
		<view class="mine-plate-1">
			<navigator url="seting/seting" open-type="navigate">
				<view class="set">
					<!-- <image src="../../static/ic_setting.png" mode="widthFix"></image> -->
					<u-icon name="setting" color="#333" size="42"></u-icon>
				</view>
			</navigator>
			<!-- 已经登陆 -->
			<view class="user-data" v-if="is_token">
				<navigator url="seting/userInfo/userInfo" open-type="navigate" hover-class="none">
					<image :src="userInfo.head_pic" class="touxiang-s" mode="aspectFill"></image>
				</navigator>
				<view class="txt">
					<view class="txt-left">
						<text>{{userInfo.nickname}}</text>
						<text>Lv.{{userInfo.level}}</text>
					</view>
					<navigator url="../appraisal/appraisal" open-type="switchTab" hover-class="none">
						<view class="txt-right">
							<text>权威鉴定</text>
							<text>马上去鉴定</text>
						</view>
					</navigator>
				</view>
			</view>
			<!-- 未登陆 -->
			<view class="user-data" v-else>
				<image :src="default_pic"  class="touxiang-s"></image>
				<view class="txt">
					<view class="txt-left" @click="authShow = true">
						<text>立即登陆</text>
					</view>
					<view class="txt-right">
						<text>权威鉴定</text>
						<text>马上去鉴定</text>
					</view>
				</view>
			</view>
			<view class="bottom-data">
				<navigator url="coupon/coupon" open-type="navigate" hover-class="none">
					<view class="item">
						<text>{{userInfo.coupons_num}}</text>
						<text>优惠券</text>
					</view>
				</navigator>
				<navigator url="../common/cart/cart" open-type="navigate" hover-class="none">
					<view class="item">
						<text>{{userInfo.cart_num}}</text>
						<text>购物车</text>
					</view>
				</navigator>
				<navigator url="attention/attention" open-type="navigate">
					<view class="item">
						<text>{{userInfo.attention_num}}</text>
						<text>关注</text>
					</view>
				</navigator>
			</view>
		</view>
		<view class="mine-plate-2">
			<view class="title">
				<text>我的订单</text>
				<navigator url="order/order" open-type="navigate">
					<view class="title-right">
						<text>查看全部订单</text>
						<u-icon name="arrow-right" color="#999" size="22"></u-icon>
					</view>
				</navigator>
			</view>
			<view class="content">
				<view class="content-left">
					<view class="item" @click="goOrderList(1)">
						<image :src="iconArr[0].picture" mode="widthFix"></image>
						<text>{{iconArr[0].pic_name}}</text>
					</view>
					<view class="item" @click="goOrderList(2)">
						<image :src="iconArr[1].picture" mode="widthFix"></image>
						<text>{{iconArr[1].pic_name}}</text>
					</view>
					<view class="item" @click="goOrderList(3)">
						<image :src="iconArr[2].picture" mode="widthFix"></image>
						<text>{{iconArr[2].pic_name}}</text>
					</view>
					<view class="item" @click="goOrderList(4)" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<image :src="iconArr[3].picture" mode="widthFix" style="width: 50upx;margin-bottom: 8upx;"></image>
						<text>{{iconArr[3].pic_name}}</text>
					</view>
				</view>
				<view class="geduan">

				</view>
				<view class="content-right" @click="onPopupShow">
					<image :src="iconArr[4].picture" mode="widthFix"></image>
					<text>{{iconArr[4].pic_name}}</text>
				</view>
			</view>
		</view>
		<view class="mine-plate-3">
			<view class="title">
				<text>我的服务</text>
			</view>
			<view class="content">
				<navigator url="../message/appraisalMessage/appraisalMessage" open-type="navigate" hover-class="none">
					<view class="item">
						<image :src="fuwuIcon[0].picture" mode="widthFix"></image>
						<text>{{fuwuIcon[0].pic_name}}</text>
					</view>
				</navigator>
				<navigator url="../appraisal/demand/demand" open-type="navigate" hover-class="none">
					<view class="item">
						<image :src="fuwuIcon[1].picture" mode="widthFix" style="width: 60upx;"></image>
						<text>{{fuwuIcon[1].pic_name}}</text>
					</view>
				</navigator>
				<navigator url="myAppraise/myAppraise" open-type="navigate" hover-class="none">
					<view class="item">
						<image :src="fuwuIcon[2].picture" mode="widthFix" style="width: 65upx;"></image>
						<text>{{fuwuIcon[2].pic_name}}</text>
					</view>
				</navigator>
				<view class="item" @click="getAddress">
					<image :src="fuwuIcon[3].picture" mode="widthFix"></image>
					<text>{{fuwuIcon[3].pic_name}}</text>
				</view>
				<navigator url="mineLevel/mineLevel" open-type="navigate" hover-class="none">
					<view class="item">
						<image :src="fuwuIcon[4].picture" mode="widthFix"></image>
						<text>{{fuwuIcon[4].pic_name}}</text>
					</view>
				</navigator>
				<navigator url="service/service" open-type="navigate" hover-class="none">
					<view class="item">
						<image :src="fuwuIcon[5].picture" mode="widthFix"></image>
						<text>{{fuwuIcon[5].pic_name}}</text>
					</view>
				</navigator>
				<navigator url="seting/aboutUs/aboutUs" open-type="navigate" hover-class="none">
					<view class="item">
						<image :src="fuwuIcon[6].picture" mode="widthFix"></image>
						<text>{{fuwuIcon[6].pic_name}}</text>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 弹窗区域 -->
		<!-- 授权弹窗 -->
		<u-popup mode="center" v-model="authShow" border-radius="20">
			<view class="auth-box">
				<view class="box-top">
					<view class="box-title">
						您还未登陆
					</view>
					<view class="box-content">
						为了完整体验，需要您的授权
						（授权仅用于用户昵称与头像）
					</view>
				</view>
				<view class="button-box">
					<button class="border-btn">暂不登陆</button>
					<button class="bg-btn" lang="zh_CN" open-type="getUserInfo" @getuserinfo="wxOnLogin">立即登陆</button>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" v-model="mobileShow" border-radius="20">
			<view class="auth-box">
				<view class="box-top">
					<view class="box-title">
						您还未绑定手机号
					</view>
					<view class="box-content">
						您需要绑定手机号来同步其他应用信息
					</view>
				</view>
				<view class="button-box">
					<button class="bg-btn" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即绑定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import IM from '../../static/js/IM.js'
	export default {
		data() {
			return {
				userInfo: '',
				iconArr: [],
				fuwuIcon: [],
				is_token: false,
				default_pic: this.$Url + '/logo.png',
				authShow: false,
				mobileShow: false,
				key: ''
			}
		},
		onShow() {
			// 判断是否登陆
			let token = uni.getStorageSync('token')
			if (token == '') {
				this.is_token = false
			} else {
				this.is_token = true
			}
			let go_login = uni.getStorageSync('go_login')
			if(go_login == 1){
				this.authShow = true
			}
			this.getMineData()
		},
		created() {
			this.getJianDing()
			this.getOrderIcon()
			this.getFuWuIcon()
		},
		methods: {
			// 请前往app提示
			onPopupShow(){
				uni.showModal({
					title:'提示',
					content:'请下载并前往APP操作',
					confirmText:'立即下载',
					cancelText:'再想想',
					confirmColor:'#D1AA56',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url:'../live/liveRoom/liveRoom'
							})
						}
					}
				})
			},
			// 绑定手机号
			getPhoneNumber(e) {
				let user_data = uni.getStorageSync('user_info')
				uni.request({
					url: this.$Url + '/index.php/app/Users/bind_mobile',
					method: 'POST',
					data: {
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						key: this.key,
						avatarUrl: user_data.avatarUrl,
						gender: user_data.gender,
						nickName: user_data.nickName,
						openId: user_data.openId,
						unionId: user_data.unionId
					},
					success: (res) => {
						if (res.data.status == 200) {
							uni.setStorageSync('token', res.data.data.token)
							uni.setStorageSync('im_account', res.data.data.im_account)
							uni.setStorageSync('im_sig', res.data.data.im_sig)
							uni.showToast({
								title: '绑定成功',
								duration: 1200
							})
							this.mobileShow = false
							this.is_token = true
							uni.setStorageSync('go_login',2)
							this.getJianDing()
							this.getOrderIcon()
							this.getFuWuIcon()
							this.getMineData()
							IM.getIM()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1200
							})
						}
					}
				})
			},

			//微信授权
			wxOnLogin() {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => {
											uni.request({
												url: this.$Url + '/index.php/app/Users/wx_info',
												method: 'POST',
												data: {
													encryptedData: info.encryptedData,
													iv: info.iv,
													code: res2.code
												},
												success: (res3) => {
													console.log(res3)
													if (res3.data.status == 202) { //绑定手机号
														this.key = res3.data.data.key
														uni.showToast({
															title: '授权成功，您需要绑定手机号码来同步其他应用',
															icon: 'none',
															duration: 1200
														})
														uni.setStorageSync('user_info', res3.data.data.user_info)
														uni.setStorageSync('openId', res3.data.data.user_info.openId)
														uni.request({
															url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxea78a3ff3edfee6d' +
															// url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx4c1d59dc04df06a7' +
																'&secret=af18d47a333dc792be40a1151dcac2ba',
																// '&secret=b76d3a00dbbd57fbcb27ba5e5dbfe653',
															method: 'POST',
															success: (res4) => {
																uni.setStorageSync('access_token', res4.data.access_token)
															}
														})
														setTimeout(() => {
															this.authShow = false
															this.mobileShow = true
														}, 1200)
													} else if (res3.data.status == 200) { //已绑定手机号直接授权成功
														uni.showToast({
															title: '授权成功'
														})
														uni.setStorageSync('go_login',2)
														uni.setStorageSync('token', res3.data.data.token)
														uni.setStorageSync('im_account', res3.data.data.im_account)
														uni.setStorageSync('im_sig', res3.data.data.im_sig)
														uni.setStorageSync('openId', res3.data.data.user_info.openId)
														uni.request({
															url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxea78a3ff3edfee6d' +
															// url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx4c1d59dc04df06a7' +
																'&secret=af18d47a333dc792be40a1151dcac2ba',
																// '&secret=b76d3a00dbbd57fbcb27ba5e5dbfe653',
															method: 'POST',
															success: (res4) => {
																uni.setStorageSync('access_token', res4.data.access_token)
															}
														})
														setTimeout(() => {
															this.authShow = false
															this.is_token = true
															this.getJianDing()
															this.getOrderIcon()
															this.getFuWuIcon()
															this.getMineData()
														}, 1200)
														IM.getIM()
													} else {
														uni.showToast({
															title: res3.data.msg,
															icon: 'none',
															duration: 1200
														})
													}

												}
											})
										}
									})
								}
							})
						} else {
							uni.showToast({
								title: '请升级微信版本'
							})
						}
					}
				})
			},

			getJianDing() {
				uni.request({
					url: this.$Url + '/index.php/App/banner/AuthenImg',
					method: 'POST',
					data: {},
					header: {
						"token": uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.status == 200) {
							console.log(res)
						} else {
							// uni.showToast({
							// 	title:res.data.msg,
							// 	icon:'none',
							// 	duration:1200
							// })
						}
					}
				})
			},
			// 请求服务图标
			getFuWuIcon() {
				uni.request({
					url: this.$Url + '/index.php/app/Banner/navigationPic',
					method: 'POST',
					data: {
						pic_type: 4
					},
					header: {
						"token": uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.status == 200) {
							this.fuwuIcon = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1200
							})
						}
					}
				})
			},
			// 请求订单图标
			getOrderIcon() {
				uni.request({
					url: this.$Url + '/index.php/app/Banner/navigationPic',
					method: 'POST',
					data: {
						pic_type: 3
					},
					header: {
						"token": uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.status == 200) {
							this.iconArr = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1200
							})
						}
					}
				})
			},
			// 前往订单列表
			goOrderList(num) {
				uni.navigateTo({
					url: 'order/order?num=' + num
				})
			},
			//请求个人中心数据
			getMineData() {
				uni.request({
					url: this.$Url + '/index.php/App/Users/userInfo',
					method: 'POST',
					data: {

					},
					header: {
						"token": uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.status == 200) {
							this.userInfo = res.data.data
							uni.setStorageSync('userInfo', res.data.data)
						} else if (res.data.status == 100) {
							this.is_token = false
						}

					}
				})
			},
			//跳转到地址管理
			getAddress() {
				uni.navigateTo({
					url: 'seting/userInfo/addminAddress/addminAddress'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		width: 100vw;
		min-height: 100vh;
		background-color: #f7f7f7;

		.auth-box {
			width: 500upx;
			height: 500upx;
			border-radius: 20upx;
			padding: 30upx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.box-top {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 80upx;

				.box-title {
					color: $zhuti-color;
					font-size: 36upx;
					margin-bottom: 20upx;
				}

				.box-content {
					color: #333;
					font-size: 26upx;
				}
			}

			.button-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				button {
					width: 180upx;
					height: 60upx;
					font-size: 22upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.mine-plate-1 {
			width: 100vw;
			height: 410upx;
			background: linear-gradient(to bottom, #f9eab9, #dcb96b);

			.set {
				display: flex;
				justify-content: flex-end;
				height: 110upx;
				align-items: center;
				padding-right: 30upx;
				// image{
				// 	width: 50upx;
				// 	margin-right: 30upx;
				// }
			}

			.user-data {
				display: flex;
				align-items: center;
				padding-left: 30upx;

				.touxiang-s {
					width: 124upx;
					height: 124upx;
					border-radius: 50%;
					margin-right: 25upx;
					display: block;
				}

				.txt {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: calc(100% - 124upx - 25upx);

					.txt-left {
						display: flex;
						flex-direction: column;
						color: #333;

						text:first-child {
							font-size: 28upx;
						}

						text:last-child {
							font-size: 24upx;
						}
					}

					.txt-right {
						width: 194upx;
						height: 100upx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						background-color: #424242;
						border-top-left-radius: 50upx;
						border-bottom-left-radius: 50upx;
						color: #e5ca86;

						text:first-child {
							font-size: 30upx;
						}

						text:last-child {
							font-size: 24upx;
						}
					}
				}
			}

			.bottom-data {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 600upx;
				margin: 45upx auto;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #333;

					text:first-child {
						font-size: 34upx;
					}

					text:last-child {
						font-size: 30upx;
					}
				}
			}
		}

		.mine-plate-2 {
			width: 100vw;
			height: 240upx;
			background-color: #fff;

			.title {
				height: 94upx;
				padding: 0 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				>text {
					font-size: 34upx;
					font-weight: 600;
					color: #333;
				}

				.title-right {
					display: flex;
					align-items: center;

					text {
						font-size: 24upx;
						color: #999999;
						margin-right: 5upx;
					}
				}
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120upx;
				padding: 0 50upx;

				.content-left {
					width: 500upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: center;

						image {
							width: 68upx;
							height: 68upx;
							margin-bottom: 10upx;
						}

						text {
							font-size: 24upx;
							color: #333;
						}
					}
				}

				.geduan {
					width: 1px;
					height: 64upx;
					background-color: #e3e3e3;
				}

				.content-right {
					display: flex;
					flex-direction: column;
					justify-content: center;

					image {
						width: 68upx;
						margin-bottom: 10upx;
					}

					text {
						font-size: 24upx;
						color: #333;
					}
				}
			}
		}

		.mine-plate-3 {
			width: 100vw;
			height: 410upx;
			background-color: #fff;
			margin-top: 20upx;

			.title {
				height: 94upx;
				padding: 0 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 34upx;
					font-weight: 600;
					color: #333;
				}
			}

			.content {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding: 0 30upx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 90upx;
					margin-bottom: 40upx;

					image {
						width: 68upx;
						margin-bottom: 18upx;
					}

					text {
						color: #333;
						font-size: 26upx;
					}
				}

				.item:nth-child(4) {
					margin-right: 0;
				}
			}
		}
	}
</style>
